<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!--UTF-8中文-->
    <title>Garousel Template</title>

    <meta content="课程教学实例" name="Description">
    <meta content="bootstrap 前端学习 css" name="Keywords">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="renderer" content="webkit"><!--360默认为极速模式打开-->

    <!--坑爹的IE兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Bootstrap -->
    <link href="//cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/style.css">
</head>
 <div>
       <div class="container to-top">
         <nav class="navbar  navbar-inverse">
             <div class="navbar-inner">
               <div class="">
                <!--<a calss="brand" href="#">Title</a>-->
                  <ul class="nav">
                    <li class="active">
                        <a href="./index.html">Project name</a>
                    </li>

                    <li class=""><a href="./getting-started.html">Home</a></li>
                    <li class=""><a href="#">About</a></li>
                    <li class=""><a href="#">Contact</a></li>
                    <li class=""><a href="#">Dropdown</a></li>

                  </ul>
               </div>
             </div>
         </nav>
       </div>

     <!--轮播图-->
     <div id="sd">
         <div id="myCarousel" class="carousel slide">
             <ol class="carousel-indicators">
                 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                 <li data-target="#myCarousel" data-slide-to="1"></li>
                 <li data-target="#myCarousel" data-slide-to="2"></li>
             </ol>
             <!-- Carousel items -->
             <div class="carousel-inner">
                 <div class="active item item-1">
                     <!--<img class="car-img" src="http://v2.bootcss.com/assets/img/examples/slide-01.jpg" alt=""/>-->


                     <div class="container ">
                         <h1 class="content">Example headline.</h1>
                         <p>Cras justo odio, dapibus ac facilisis in,egestas eget quam.</p>
                         <p>Donec id elit non mi porta gravida at eget metus.Nullam id</p>
                         <p>dolor id nibh ultricies vehicula ut id elit.</p>
                         <button class="btn btn-primary btn-large">Sign up tody</button>
                     </div>
                 </div>
                 <div class="item item-2">
                     <!--<img class="car-img"  src="http://v2.bootcss.com/assets/img/examples/slide-02.jpg" alt=""/>-->
                     <div class="container">
                         <h1 class="content">Another example headline.</h1>
                         <p>Cras justo odio, dapibus ac facilisis in,egestas eget quam.</p>
                         <p>Donec id elit non mi porta gravida at eget metus.Nullam id</p>
                         <p>dolor id nibh ultricies vehicula ut id elit.</p>
                         <button class="btn btn-primary btn-large">Leam more</button>
                     </div>
                 </div>
                 <div class="item item-3">
                     <!--<img class="car-img"  src="http://v2.bootcss.com/assets/img/examples/slide-03.jpg" alt=""/>-->

                     <div class="container ">
                         <h1 class="content">One more for good measure.</h1>
                         <p>Cras justo odio, dapibus ac facilisis in,egestas eget quam.</p>
                         <p>Donec id elit non mi porta gravida at eget metus.Nullam id</p>
                         <p>dolor id nibh ultricies vehicula ut id elit.</p>
                         <button class="btn btn-primary btn-large">Browse gallery</button>
                     </div>
                 </div>
             </div>
             <!-- Carousel nav -->
             <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
             <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
         </div>
     </div>
 </div>


<article>
   <div>
       <div class="row">
           <div class="span12"></div>
           <div class="span4">
               <img src="./img/1.png" />
               <h3 >Heading</h3>
               <p>
                   Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod.
                   Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus,
                   porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
                   vel scelerisque nisl consectetur et.
               </p>
               <p><a href="#" class="btn">View details »</a></p>
           </div>

           <div class="span4">
               <img src="./img/1.png" />
               <h3 >Heading</h3>
               <p>
                   Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
                   eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
                   Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
                   ut fermentum massa justo sit amet risus.
               </p>
               <p><a href="#" class="btn">View details »</a></p>
           </div>

           <div class="span4">
               <img src="./img/1.png" />
               <h3 >Heading</h3>
               <p>
                   Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
                   Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo,
                   tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
               </p>
               <p><a href="#" class="btn">View details »</a></p>
           </div>
       </div>

      <div class="featurette">
          <img src="./img/browser-icon-chrome.png"  class="featurette-image pull-right"/>
          <h3>First featurette headling.
              <span>It'll blow your mind.</span>
          </h3>
          <p>Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis
              euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur.
              Fusce dapibus, tellus ac cursus commodo.
          </p>
      </div>

       <div class="featurette">
           <img src="./img/browser-icon-firefox.png"  class="featurette-image pull-left"/>
           <h3>Oh yeah, it's that good.
               <span>See for yourself.</span>
           </h3>
           <p>Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis
               euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur.
               Fusce dapibus, tellus ac cursus commodo.
           </p>
       </div>

       <div class="featurette">
           <img src="./img/browser-icon-safari.png"  class="featurette-image pull-right"/>
           <h3>And lastly, this one.
               <span>Checkmate.</span>
           </h3>
           <p>Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis
               euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur.
               Fusce dapibus, tellus ac cursus commodo.
           </p>
       </div>
   </div>
</article>

<footer>
   <div>
       <p>© 2013 Company, Inc. ·
           <a href="#">Privacy</a> ·<a href="#"> Terms</a></p>
   </div>
</footer>

<script src="http://code.jquery.com/jquery.js"></script>

<script src="//cdn.bootcss.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
</body>
</html>